import React, { useState } from "react";
import { modalPropsType } from "@/constants/types";
import { Modal, Row, Col, Space, Button, message } from "antd";
import { getNearlySevenDays } from "@/utils/util";
import "./index.less";


const XlTimeRangeModal = ({visible, onCancel, onSubmit, value, onChange}: modalPropsType) => {
  const [date, setDate] = useState({
    date: '',
    time: ''
  });

  const selectedDate = (val: any) => {
    setDate({
      date: val.value,
      time: date.time
    });
  }
  const selectedTime = (val: any) => {
    setDate({
      date: date.date,
      time: val.value
    });
  }
  const handleSubmit = () => {
    if (!date.date) {
      message.warning('请选择日期');
      return;
    }
    if (!date.time) {
      message.warning('请选择时间');
      return;
    }
    onSubmit(date);
  }

  const getTitle = (item: any) => {
    if (!item) {
      return '';
    }
    const d = new Date(item);
    const month = d.getMonth() + 1;
    const date = d.getDate();
    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const week = weekdays[d.getDay()]

    return `${month}月${date}日 [${week}]`;
  }

  const dateList = getNearlySevenDays().map(v => ({
    label: getTitle(v),
    value: v
  }));

  const timeList = [
    {
      label: '10:00-12:00',
      value: '10:00-12:00',
    },
    {
      label: '12:00-14:00',
      value: '12:00-14:00',
    },
    {
      label: '14:00-16:00',
      value: '14:00-16:00',
    },
    {
      label: '16:00-18:00',
      value: '16:00-18:00',
    },
  ];

  return (
    <Modal
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      maskClosable={false}
      title="时间选择"
      width="500px"
    >
      <Row gutter={20}>
        <Col span={9}>
          <Space style={{width: '100%'}} direction="vertical">
            {
              dateList?.map(v => (
                <Button style={{width: '100%'}} onClick={() => selectedDate(v)} type={date.date === v?.value ? 'primary' : 'default'} key={v.value}>{v.label}</Button>
              ))
            }
          </Space>
        </Col>
        <Col span={15}>
          <Space style={{width: '100%'}} direction="vertical">
            {
              timeList?.map(v => (
                <Button style={{width: '100%'}} onClick={() => selectedTime(v)} type={date.time === v.value ? 'primary' : 'default'} key={v.value}>{v.label}</Button>
              ))
            }
          </Space>
        </Col>
      </Row>
    </Modal>
  );
}
export default XlTimeRangeModal;